<template>
  <div>
    <div class="head">
      <div class="header-back" @click="fun()"></div>
      <router-link to="/login"><span>登录</span></router-link>
    </div>
    <div class="wrap">
    <h2>输入手机号</h2>
    <ul>
      <li>中国大陆 86 <span>></span>
      </li>
      <li>
        <input type="text" placeholder="常用手机号">
      </li>
      <li>
         <input type="text" placeholder="短信动态码">
         <span class="title">发送动态码</span>
      </li>
      <li>
        <span class="txt">注册</span>
      </li>
    </ul>
    <div class="foot">
      <input type="checkbox">
      注册即代表同意我们的<span>《服务协议》</span>和<span>《个人信息保护政策》</span>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$router.push("/homepage");
    },
  },
};
</script>

<style scoped>
.head {
  padding: 0 0.12rem;
  height: 0.44rem;
  display: flex;
  justify-content: space-between;
}
.header-back {
  background: url(https://pages.c-ctrip.com/you/livestream/tripshoot_forward%20_black@3x.png)
    no-repeat 50%;
  background-size: 0.24rem;
  width: 0.24rem;
  height: 0.24rem;
  margin: 0.1rem 0;
}
.head span {
  display: block;
  margin-top: 0.1rem;
  color: #099fde;
  font-size: 0.15rem;
}
.wrap{
  padding-top: .44rem;
}
.wrap h2{
    text-align: center;
    font-size: .25rem;
    color: #333;
    line-height: .25rem;
    font-weight: 400;
}
.wrap ul{
  margin-top: .5rem;
  padding: 0 .3rem;
}
.wrap ul li{
  height: .55rem;
  font-size: .16rem;
  line-height: .55rem;
}
.wrap ul li span{
  margin-left: 2.1rem;
  color: #666;
}
.wrap ul li input{
  font-size: .16rem;
  color: #666;
  outline: none;
  border: none;
}
.wrap ul li:nth-child(2){
  border-bottom: .01rem solid #e5e5e5;
}
.wrap ul li .title{
  border: 1px solid #e5e5e5;
  padding: .1rem;
  border-radius: .05rem;
  color: #099fde;
  font-size: .12rem;
  margin-left: .3rem;
}
.wrap ul li .txt{
  margin-left: 0;
  margin-top: .2rem;
  display: block;
  width: 100%;
  height: .5rem;
  border-radius: .05rem;
  background-color: orange;
  color: #fff;
  text-align: center;
}
.wrap ul li:last-child{
  display: flex;
  justify-content: space-between;
}
.wrap ul li:last-child .txt2{
   margin-left: 0;
   font-size: .16rem;
}
.foot{
  margin-top: .5rem;
  height: .18rem;
  font-size: .12rem;
  text-align: center;
  color: #666;
}
.foot span{
   color: #099fde;
}
</style>